<template>
	<div>
		<div
			v-for="(dateTimeItem, dateTimeIndex) in scope.row.scheduleEmpPostDateList || []"
			:key="dateTimeIndex"
			class="flex-start-center"
		>
			<div style="width: 120px;flex-shrink: 0;">
				<post-popover
					:is-add="true"
					:check-data="checkData"
					:readonly="readonly"
					:emp-item="scope.row"
					:date-time-item="dateTimeItem"
					:post-item="{}"
					:post-list="postList"
					@on-refresh="onRefresh"
				>
					<el-tag slot="reference" :closable="true" style="cursor: pointer;" type="info" @close="onDeleteDateTimeItem(dateTimeItem)">{{ `${transformDateTime(dateTimeItem.startDateTime)}~${transformDateTime(dateTimeItem.endDateTime)}` }}</el-tag>
				</post-popover>
			</div>
			<div class="width-100-percent">
				<div
					v-for="(postItem, postIndex) in dateTimeItem.scheduleEmpPostList || []"
					:key="postIndex"
					class="post-item"
				>
					<div class="post-item-label">
						<post-popover
							:is-add="false"
							:readonly="readonly"
							:check-data="checkData"
							:emp-item="scope.row"
							:date-time-item="dateTimeItem"
							:post-item="postItem"
							:post-list="postList"
							@on-refresh="onRefresh"
						>
							<el-tag slot="reference" style="cursor: pointer;" class="width-100-percent flex-between-center" :closable="!readonly" @close="onRemovePostItemIcon(dateTimeItem, postItem)">{{ postItem.postName || '无' }}</el-tag>
						</post-popover>
					</div>
					<div class="post-item-machine-container">
						<div
							v-for="(machineItem, machineIdx) in postItem.scheduleEmpMachineList || []"
							:key="machineIdx"
							style="padding: 4px;width: calc(100% / 6);"
						>
							<el-tag style="cursor: pointer;" type="info" effect="plain" class="width-100-percent flex-between-center" :closable="!readonly" @click="onSetSpinGroupBtn(scope.row, postItem, machineItem)" @close="onRemoveMachineBtn(scope.row, postItem, machineItem)">
								<div class="flex-start-center">
									<div :style="setBgColor(machineItem)" style="width: 8px;height: 8px;border-radius: 1px;margin-right: 4px;"></div>
									<span>{{ machineItem.machineName }}</span>
								</div>
							</el-tag>
						</div>
						<div v-show="!readonly" style="padding: 4px;" @click="onAddMachineBtn(scope.row, dateTimeItem, postItem)">
							<el-tag type="info" style="cursor: pointer;" class="el-icon-plus"></el-tag>
						</div>
					</div>
				</div>
			</div>
			<jk-button v-if="dateTimeItem.scheduleEmpPostList && dateTimeItem.scheduleEmpPostList.length" :disabled="readonly" size="mini" @click="onReplacePostBtn(scope.row, dateTimeItem)">替岗</jk-button>
		</div>

		<checkbox-machine-dialog
			:workshop-id="searchParams.workshopId"
			:schedule-shift-id="searchParams.scheduleShiftId"
			:default-select-rows="selectedMachineList"
			check-key-name="machineId"
			:dialog-state="selectMachineDialogState"
			@on-visible-change="onVisibleChangeOfSelectMachineDialog"
			@on-confirm="onConfirmBtnOfSelectMachineDialog"
		></checkbox-machine-dialog>
		<set-spin-group-dialog
			:readonly="readonly"
			:select-machine-item="selectMachineItem"
			:dialog-state="setSpinGroupDialogState"
			@on-visible-change="onVisibleChangeOfSetSpinGroupDialog"
			@on-confirm="onConfirmBtnOfSetSpinGroupDialog"
		></set-spin-group-dialog>

		<replace-post-dialog
			:data-item="dataItem"
			:dialog-state="replacePostDialogState"
			@on-visible-change="onVisibleChangeReplacePostDialog"
			@on-finish="onFinishReplacePostDialog"
		></replace-post-dialog>
	</div>
</template>
<script>
    import legendList from '../../legend-bar/lengend-list';
    import {
        workforceManagementScheduleEmpMachineCreate,
        workforceManagementScheduleEmpMachineDelete,
        workforceManagementScheduleEmpPostDelete,
        workforceManagementScheduleEmpWorkTimeDelete
    } from '../../../../../../api/schedule/scheduling';
    import checkboxMachineDialog from '../../../../empMachine/components/schedule-checkbox-machine-dialog';
    import setSpinGroupDialog from '../../set-spin-group-dialog';
    import replacePostDialog from '../../../../empReplacePost/save-dialog';
    import postPopover from './post-popover';

    export default {
        mixins: [legendList],
        components: {
            postPopover,
            replacePostDialog,
            setSpinGroupDialog,
            checkboxMachineDialog
        },
        props: {
            postList: {
                type: Array,
                default() {
                    return [];
                }
            },
            formData: {
                type: Object,
                default() {
                    return {};
                }
            },
            searchParams: {
                type: Object,
                default() {
                    return {};
                }
            },
            scope: {
                type: Object,
                default() {
                    return {};
                }
            },
            checkData: {
                type: Object,
                default() {
                    return {};
                }
            },
            readonly: { // 只读
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                replacePostDialogState: false,
                dataItem: {},
                selectMachineItem: {},
                setSpinGroupDialogState: false,
                selectMachineDialogState: false,
                addMachineInfo: {},
                selectedMachineList: []
            };
        },
        methods: {
            onRemovePostItemIcon(dateTimeItem, postItem) {
                this.$msgbox({
                    title: '消息',
                    message: `确定移除"${postItem.postName}"吗？`,
                    iconClass: 'el-icon-question',
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = '执行中...';
                            workforceManagementScheduleEmpPostDelete({
                                id: postItem.id,
                                postId: postItem.postId,
                                postName: postItem.postName,
                                scheduleEmpPostDateId: dateTimeItem.id
                            }).then(res => {
                                instance.confirmButtonLoading = false;
                                instance.confirmButtonText = '确定';
                                if (res.data.status === 200) {
                                    done();
                                    this.onRefresh();
                                }
                            });
                        } else {
                            done();
                        }
                    }
                });
            },
            onFinishReplacePostDialog() {
                this.onRefresh();
            },
            onRefresh() {
                this.$emit('on-refresh');
            },
            onVisibleChangeReplacePostDialog(e) {
                this.replacePostDialogState = e;
            },
            onConfirmBtnOfSetSpinGroupDialog() {
                this.onRefresh();
            },
            onVisibleChangeOfSetSpinGroupDialog(e) {
                this.setSpinGroupDialogState = e;
            },
            onConfirmBtnOfSelectMachineDialog(data) {
                const arr = data ? data.map(x => {
                    return {
                        machineId: x.id,
                        machineCode: x.code,
                        machineName: x.name
                    };
                }) : [];
                this.selectMachineDialogState = false;
                this.contentLoading = true;
                workforceManagementScheduleEmpMachineCreate({
                    postId: this.addMachineInfo.postId,
                    scheduleEmpId: this.addMachineInfo.scheduleEmpId,
                    scheduleEmpPostDateId: this.addMachineInfo.scheduleEmpPostDateId,
                    machineList: arr
                }).then(res => {
                    if (res.data.status === 200) {
                        this.onRefresh();
                    } else {
                        this.contentLoading = false;
                    }
                });
            },
            onVisibleChangeOfSelectMachineDialog(e) {
                this.selectMachineDialogState = e;
            },
            onDeleteDateTimeItem(dateTimeItem) {
                this.$msgbox({
                    title: '消息',
                    message: `确定移除"${this.scope.row.empName}"的工作时间(${this.transformDateTime(dateTimeItem.startDateTime)}~${this.transformDateTime(dateTimeItem.endDateTime)})吗？`,
                    iconClass: 'el-icon-question',
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = '执行中...';
                            workforceManagementScheduleEmpWorkTimeDelete({
                                id: dateTimeItem.id
                            }).then(res => {
                                instance.confirmButtonLoading = false;
                                instance.confirmButtonText = '确定';
                                if (res.data.status === 200) {
                                    done();
                                    this.onRefresh();
                                }
                            });
                        } else {
                            done();
                        }
                    }
                });
            },
            onRemoveMachineBtn(row, postItem, machineItem) {
                this.$msgbox({
                    title: '消息',
                    message: `确定将"${machineItem.machineName}"从"${row.empName}"的身上移除吗？`,
                    iconClass: 'el-icon-question',
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = '执行中...';
                            workforceManagementScheduleEmpMachineDelete({
                                id: machineItem.id
                            }).then(res => {
                                instance.confirmButtonLoading = false;
                                instance.confirmButtonText = '确定';
                                if (res.data.status === 200) {
                                    done();
                                    this.onRefresh();
                                }
                            });
                        } else {
                            done();
                        }
                    }
                });
            },
            onAddMachineBtn(empItem, dateItem, postItem) {
                this.selectedMachineList = JSON.parse(JSON.stringify(postItem.scheduleEmpMachineList));
                this.addMachineInfo = {
                    scheduleEmpPostDateId: dateItem.id,
                    scheduleEmpId: empItem.id,
                    postId: postItem.postId
                };
                this.selectMachineDialogState = true;
            },
            transformDateTime(e) {
                let str = e && e.split(' ') ? e.split(' ')[1] : '';
                const arr = str.split(':');
                str = arr[0] + ':' + arr[1];
                return str;
            },
            onSetSpinGroupBtn(empItem, postItem, machineItem) {
                /* this.selectMachineItem = {
                    empItem,
                    postItem,
                    machineItem
                };
                this.setSpinGroupDialogState = true;*/
            },
            onReplacePostBtn(empItem, dateItem) {
                const cpData = JSON.parse(JSON.stringify(this.checkData));
                this.dataItem = {
                    'belongDate': cpData.date,
                    'scheduleId': cpData.scheduleId,
                    'scheduleShiftId': cpData.shiftItem.id,
                    'scheduleShiftName': cpData.shiftItem.shiftName,
                    'scheduleShiftBeginTime': this.formData.startDateTime,
                    'scheduleShiftEndTime': this.formData.endDateTime,
                    'startDateTime': dateItem.startDateTime,
                    'endDateTime': dateItem.endDateTime,
                    'scheduleGroupId': cpData.scheduleGroupId,
                    'scheduleGroupName': cpData.scheduleGroupName,
                    'scheduleEmpId': empItem.id,
                    'scheduleEmpName': empItem.empName,
                    'scheduleEmpPostList': dateItem.scheduleEmpPostList
                };
                this.replacePostDialogState = true;
            }
        }
    };
</script>
<style scoped lang="scss">
.remove-emp-item-icon {
    font-size: 13px;
}
.remove-emp-item-icon:hover {
    color: #2d8cf0;
}
.post-item {
    width: 100%;
    height: 100%;
    border-bottom: none;
    display: flex;
    align-items: center;
    .post-item-label {
        width: 120px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .post-item-machine-container {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
}
.post-item:last-child {
}
</style>
